<template>
	<view>
		<view class="top">
			<view class="topBg"></view>
			<view class="topView">
				<view class="topViewFlex">
					<view :class="['topViewItem', 1 == is_takeaway ? 'active' : '']" @click="activeChanged(1)">外卖配送</view>
					<view :class="['topViewItem1', 2 == is_takeaway ? 'active' : '']" @click="activeChanged(2)">到店堂食</view>
				</view>

				<block v-if="is_takeaway == 1">
					<view class="topSelectFlex" @tap="$wanlshop.auth('/pages/user/envelope/address?source=4')">
						<view class="topSelectText" v-if="!address">选择您的收货地址</view>
						<view class="topSelectLeft" v-else>
							<view class="popupFlexRightTitle" style="color: #333;font-weight: 400;font-size: 30rpx;margin-bottom: 10rpx;">{{ address.address_detail}}</view>
							<view class="popupFlexRightText">{{address.name}} {{address.mobile}}</view>
						</view>
						<view class="topSelectIcon">
							<uni-icons type="right" size="24" color="#999"></uni-icons>
						</view>
					</view>
				</block>

				<block v-if="is_takeaway == 2">
					<view class="topAddress">{{storeInfo.citys}} {{storeInfo.address}}</view>
					<view class="topName">{{storeInfo.name}}</view>
				</block>
			</view>

		</view>

		<view class="orderList">
			<view class="orderView">
				<view class="orderItem" v-for="(item,index) in goodsList" :key="index">
					<image :src="$wanlshop.oss(item.image)" class="orderItemImg" mode="aspectFill"></image>
					<view class="orderItemRight">
						<view class="orderItemRightFlex">
							<view class="orderItemRightText">{{item.title}}</view>
							<view class="orderItemRightMoney">￥{{item.price}}</view>
						</view>
						<view class="orderItemRightNum">x{{item.number}}</view>
					</view>
				</view>



				<!-- <view class="orderFlex">
					<view>打包费</view>
					<view>￥1</view>
				</view> -->

				<view class="orderFooter">
					<view>总计</view>
					<view class="orderFooterMoney">￥{{Price}}</view>
				</view>
			</view>
		</view>

		<view class="notesView">
			<view class="notesList">
				<view class="notesFlex">
					<view class="notesText">备注</view>
					<input placeholder="请填写您的需求" class="notesInt" v-model="memo" />
					<!-- <uni-icons type="right" size="18" color="#999"></uni-icons> -->
				</view>
				
				<view class="notesFlex" @click="opencoupon">
					<view class="notesText">优惠劵</view>
					<view class="notesRight" :style="{color:coupon ? '#FA802A' : ''}">{{coupon ? coupon.name : '请选择'}} <view class="discount" v-if="discount > 0">-¥{{discount}}</view> </view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
				<view class="notesFlex" v-if="subside_info">
					<view class="notesText">补贴金额 </view>
					<view class="" style="display: flex;justify-content: flex-end;align-items: center;flex: 1;">
						<view class="subside_info_tips" v-if="subside_info && subside_info.tips.length > 0">(<text v-for="(t,l) in subside_info.tips" :key="l">{{t}} {{l < subside_info.tips.length - 1 ? ',':''}} </text>)</view>
						<view style="margin-left: 0;" :style="{color:subside_info ? '#FA802A' : ''}" class="notesRight">¥ <text style="font-size: 38rpx;">{{subside_info ? subside_info.money : '0'}}</text> </view>
					</view>
				</view>
				
				<view class="notesFlex" v-if="is_takeaway == 1" @click="toggle('bottom')">
					<view class="notesText">餐具</view>
					<view class="notesRight" :style="{color:popupActive == null ? '' : '#FA802A'}">{{popupActive == null ? '请选择' : popupActive == 0 ? '需要餐具' : '无需餐具'}}</view>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		
		
		<view class="zw"></view>
		<view class="footer" v-if="showBtn">
			<!-- <image src="/static/restaurant/index/shop2.png" class="footerImg"></image> -->
			<view class="money"><view>合计：</view><view class="text1">￥</view><view
					class="text2">{{totalPrice}}</view> <view class="discount" v-if="discount > 0">已优惠¥{{discount}}</view> </view>
			<view class="fonterBtn" @tap="onsubmit">提交订单</view>
		</view>


		<uni-popup ref="popup" background-color="#ffffff" @change="change" type="bottom">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">

				<view class="popupFlex">
					<image src="/static/restaurant/index/submit3.png" class="popupFlexImg"></image>
					<view class="topSelectText" style="margin-left: 10rpx;" v-if="!address">选择您的收货地址</view>
					<view class="popupFlexRight" v-else>
						<view class="popupFlexRightTitle">{{address.address}}</view>
						<view class="popupFlexRightText">{{address.name}} {{address.mobile}}</view>
					</view>
				</view>
				<view class="popupView">
					<view class="popupViewText">当前地址下单，是否需要餐具？</view>
					<view class="popupViewBg">
						<view :class="['popupViewItem', 0 === popupActive ? 'active' : '']"
							@click="popupActiveCilck(0)">需要餐具</view>
						<view :class="['popupViewItem', 1 === popupActive ? 'active' : '']"
							@click="popupActiveCilck(1)">
							<view>无需餐具</view>
						</view>
					</view>
					<block v-if="0 === popupActive">
						<view class="popupViewText">选择餐具数量</view>
						<view class="popupViewBg">
							<view class="popupViewItem1 active">商家按餐量提供</view>
							<view class="popupViewItem1 popupViewItem2">
								<view class="popupViewItemText" @click="min()">-</view>
								<view>{{num}}份</view>
								<view @click="add()">+</view>
							</view>
						</view>
					</block>
				</view>

				<view class="btn" @click="saveCilck()">保存</view>
			</view>
		</uni-popup>
		
		
		
		<!-- 选择优惠券弹出层 -->
		<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
		<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
			<scroll-view class="scrolls" scroll-y>
				<s-empty v-if="couponList && couponList.length == 0"></s-empty>
				<view class="coupon-card" v-for="item in couponList" :key="item.id">
					<view class="card-content">
						<view class="amount-content" :class="[`status${item.coupon_type}`]">
							<view class="amount">
								<view class="price">{{item.coupon_type == 3 ? item.coupon_type_text : item.price}}</view>
								<text>{{item.coupon_type == 1 ? '元' : item.coupon_type == 2 ? '折' : ''}}</text>
							</view>
							<view class="amount-text">
								{{item.name}}
							</view>
						</view>
						<view class="coupon-info">
							<view class="info-name">
								{{item.name}}
							</view>
							<view class="info-time">
								{{$wanlshop.timeToDate(item.starttime,2)}}~{{$wanlshop.timeToDate(item.endtime,2)}}
							</view>
						</view>
					</view>
				
					<view class="coupon-desc" :class="[`status${item.coupon_type}`]">
						<text>{{item.is_use_text}}</text>
						<view @tap="useCoupon(item)">立即使用</view>
					</view>
				</view>
		
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['common'])
		},
		data() {
			return {
				storeInfo: {
					name: '',
					citys: '',
					address: ''
				},
				address: null,
				addressList: [],
				type: 'center',
				popupActive: null,
				num: 0,
				totalPrice: 0,
				Price: 0,
				cartList: [],
				goodsList: [],
				is_takeaway: 1,
				addOrderGoods:[],
				memo:'',
				showBtn:true,
				
				couponshow: false,
				couponList: null,
				coupon: null,
				discount: 0,
				subside_info:null
			}
		},
		onLoad(option) {
			if(option.t) {
				this.is_takeaway = option.t
			}
			// this.$api.addCarStorage({type:'empty'})
			this.addCarStorage([])
			this.getStore()
		},
		methods: {
			containsAnyDigit(str) {
				let arr = ['省','市','自治区','自治州','行政区','盟','旗','县','区']
			    // 遍历数组中的每个元素  
			    for (let i = 0; i < arr.length; i++) {  
			        // 将数字转换为字符串  
			        const digitStr = arr[i].toString();  
			        // 检查这个字符串是否存在于给定的字符串中  
			        if (str.includes(digitStr)) {  
			            return true; // 如果找到，则返回true  
			        }  
			    }  
			    // 如果遍历完数组都没有找到，则返回false  
			    return false;  
			},
			async loadData(order_money) {
				let res = await this.$api.getUsableCoupon({
					page: this.current_page,
					order_money: order_money
				});
				if (res.code == 1) {
					this.couponList = res.data
				}
			},
			useCoupon(item) {
				this.coupon = item;
				// this.totalPrice = '';
				if(this.totalPrice > 0) {
					this.totalPrice = this.$wanlshop.bcadd(this.totalPrice,Number(this.subside_info.money))
				}
				
				if(item.coupon_type == 1) {
					// 满减
					this.totalPrice = this.$wanlshop.bcsub(this.Price,item.price).toFixed(2);
					this.discount = this.$wanlshop.bcsub(this.Price,this.totalPrice).toFixed(2)
				} else if(item.coupon_type == 2){
					this.totalPrice = this.$wanlshop.bcdiv(this.$wanlshop.bcmul(this.Price,item.price),10).toFixed(2)
					this.discount = this.$wanlshop.bcsub(this.Price,this.totalPrice).toFixed(2)
				} else if(item.coupon_type == 3) {
					this.totalPrice = 0
					this.discount = this.Price
				} else {
					this.totalPrice = this.Price
					this.discount = 0
				}
				
				// 年龄补贴
				if(this.subside_info && Number(this.subside_info.money) > 0) {
					if(Number(this.subside_info.money) < this.totalPrice) {
						this.totalPrice = this.$wanlshop.bcsub(this.totalPrice,Number(this.subside_info.money))
					} else {
						this.totalPrice = 0
					}
				}
				this.hidecoupon()
			},
			// 打开优惠券弹框 
			opencoupon() {
				this.showBtn = false
				this.couponshow = true
			},
			// 关闭优惠券弹框 
			hidecoupon() {
				this.showBtn = true
				this.couponshow = false
			},
			
			//领取优惠券 立即使用事件
			onReceive(item, index) {
				console.log(item, index)
				if (item.status == 1) {
					// 立即使用 事件
			
			
				} else {
					this.couponList[index].status = 1 //领取成功
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
				}
			},
			async getStore() {
				let res = await this.$api.getStore({
					storeid: this.common.store && this.common.store.id
				});
				if (res.code == 1) {
					let data = res.data;
					this.storeInfo.name = data.name
					this.storeInfo.citys = data.citys
					this.storeInfo.address = data.address
				}
			},
			async getOrderGoodsList(data) {
				let res = await this.$api.getOrderGoodsList({
					data: data
				});
				if (res.code == 1) {
					let goodsList = res.data.orderData.lists;
					let subside_info = res.data.orderData.subside_info
					this.subside_info = subside_info;
					this.address = res.data.addressData
					let temp = []
					goodsList.forEach(item => {
						if (this.common.store.id == item.shop_id) {
							temp = item.products
						}
					})
					this.goodsList = temp

					let totalPrice = 0;
					temp.forEach(item => {
						totalPrice = this.$wanlshop.bcadd(totalPrice, this.$wanlshop.bcmul(Number(item.number), item.price))
					})
					this.Price = totalPrice
					if(subside_info && Number(subside_info.money) > 0) {
						if(Number(subside_info.money) < totalPrice) {
							totalPrice = this.$wanlshop.bcsub(totalPrice,Number(subside_info.money))
						} else {
							totalPrice = 0
						}
					}
					this.totalPrice = totalPrice
					this.loadData(totalPrice)
				}
			},
			async addCarStorage(data) {
				let res = await this.$api.getCarStorage({
					cart: data
				});
				if (res.code == 1) {
					this.cartList = res.data.list;
					let data = res.data.list;
					let temp = []
					data.forEach(item => {
						temp.push({
							goods_id: item.goods_id,
							number: item.number,
						})
					})
					this.addOrderGoods = temp
					this.getOrderGoodsList(temp)
				}
			},
			activeChanged(e) {
				this.is_takeaway = e
			},
			popupActiveCilck(e) {
				this.popupActive = e
			},
			toggle(type) {
				console.log("cxzczcz", type)
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				this.showBtn = !e.show
			},
			min() {
				if (this.num > 1) {
					this.num = this.num - 1
				}
			},
			add() {
				this.num = this.num + 1
			},
			saveCilck() {
				this.$refs.popup.close()
			},
			async onsubmit() {
				if(this.is_takeaway == 1 && !this.address) return this.$wanlshop.msg('请选择外卖配送地址') 
				let res = await this.$api.addOrder({
					order: {
						lists: [{
							shop_id: this.common.store && this.common.store.id,
							products: this.addOrderGoods,
							coupon_id: this.coupon && this.coupon.id
						}],
						address_id: this.address && this.address.id
					},
					is_takeaway: this.is_takeaway,
					tableware_num: this.num,
					memo: this.memo
				})
				if(res.code == 1) {
					this.$wanlshop.msg('订单创建成功')
					this.$api.addCarStorage({type:'empty'})
					setTimeout(() => {
						this.$wanlshop.to(`/pages/user/money/pay?id=${res.data.list[0].order_id}&type=canteen`)
					}, 1500);
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: auto;

		.topBg {
			width: 100%;
			height: 88rpx;
			background: #2e2f31;
		}

		.topView {
			width: 100%;
			height: auto;
			background: #FFFFFF;
			border-radius: 56rpx 56rpx 0 0;
			margin-top: -60rpx;
			overflow: hidden;

			.topViewFlex {
				width: 100%;
				height: 94rpx;
				display: flex;
				align-items: center;
				background: #efefef;

				.topViewItem {
					width: 50%;
					height: 94rpx;
					line-height: 94rpx;
					text-align: center;

					&.active {
						// background-color: #FFFFFF;
						position: relative;
						// background-image: url('@/static/restaurant/index/submit1.png');
						background-image: url($cdnurl + "/uploads/staticImage/restaurant/index/submit1.png");
						background-size: 100% 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
				}

				.topViewItem1 {
					width: 50%;
					height: 94rpx;
					line-height: 94rpx;
					text-align: center;

					&.active {
						// background-color: #FFFFFF;
						position: relative;
						// background-image: url(@/static/restaurant/index/submit2.png);
						background-image: url($cdnurl + "/uploads/staticImage/restaurant/index/submit2.png");
						background-size: 100% 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
				}
			}

			.topAddress {
				padding: 0 40rpx;
				margin-top: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}

			.topName {
				padding: 0 40rpx;
				margin-bottom: 46rpx;
				font-family: PingFang SC, PingFang SC;
				// font-weight: 400;
				margin-top: 14rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.topSelectFlex {
				display: flex;
				align-items: center;
				padding: 40rpx;

				.topSelectText {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #FA802A;
				}

				.topSelectIcon {
					color: #999999;
					margin-left: auto;
				}

				.topSelectLeftText {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				.topSelectLeftName {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #555555;
					margin-top: 6rpx;
				}
			}





		}
	}


	.orderList {
		width: 100%;
		height: auto;
		padding: 24rpx 16rpx;

		.orderView {
			width: 100%;
			height: auto;
			background: #fff;
			padding: 38rpx 24rpx 1rpx 24rpx;
			border-radius: 20rpx;

			.orderItem {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				margin-bottom: 34rpx;

				.orderItemImg {
					width: 156rpx;
					height: 156rpx;
					border-radius: 10rpx;
				}

				.orderItemRight {
					width: 480rpx;
					margin-left: auto;

					.orderItemRightFlex {
						display: flex;
						align-items: center;

						.orderItemRightText {
							width: 390rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}

						.orderItemRightMoney {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #FF2222;
						}
					}

					.orderItemRightNum {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #999999;
						margin-top: 22rpx;
					}
				}
			}


			.orderFlex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 50rpx;
			}

			.orderFooter {
				width: 100%;
				height: 114rpx;
				border-top: 1rpx solid #E0E0E0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #333333;

				.orderFooterMoney {
					color: #FF2222;
				}
			}
		}
	}


	.notesView {
		width: 100%;
		height: auto;
		padding: 0 16rpx;

		.notesList {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background: #fff;
			padding: 0 24rpx;

			.notesFlex {
				width: 100%;
				height: 92rpx;
				display: flex;
				align-items: center;

				.notesText {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.notesInt {
					margin-left: auto;
					text-align: right;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
				}

				.notesRight {
					margin-left: auto;
					text-align: right;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #333;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.discount {
						margin-left: 20rpx;
						color: #f00;
					}
				}
			}
		}
	}

	.footer {
		z-index: 9;
		width: 694rpx;
		height: 96rpx;
		background: #333333;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		position: fixed;
		bottom: 58rpx;
		left: 28rpx;
		display: flex;
		align-items: center;

		.footerImg {
			width: 62rpx;
			height: 60rpx;
			margin-left: 34rpx;

		}

		.money {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			margin-left: 26rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			cover-view {
				font-weight: bold;
			}
			.discount {
				margin-left: 20rpx;
				margin-top: 10rpx;
				color: #e35319;
			}
			.text2 {
				font-size: 40rpx;
			}
		}

		.fonterBtn {
			width: 180rpx;
			height: 96rpx;
			background: #FA802A;
			border-radius: 0rpx 48rpx 48rpx 0rpx;
			margin-left: auto;
			text-align: center;
			line-height: 96rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}

	.zw {
		width: 100%;
		height: 174rpx;
	}

	.bottom::v-deep .vue-ref {
		border-radius: 24rpx 24rpx 0 0 !important;
		overflow: hidden;
	}

	.popup-content {
		// align-items: center;
		// justify-content: center;
		padding: 30rpx;
		background-color: #fff;
		.popupFlex {
			width: 100%;
			height: auto;
			margin-top: 32rpx;
			display: flex;

			.popupFlexImg {
				width: 32rpx;
				height: 36rpx;
			}

			.popupFlexRight {
				width: 600rpx;
				height: auto;
				margin-left: 24rpx;

				.popupFlexRightTitle {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.popupFlexRightText {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #555555;
					margin-top: 2rpx;
				}
			}
		}

		.popupView {
			width: 100%;
			height: auto;
			padding: 20rpx 32rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-top: 38rpx;

			.popupViewText {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}

			.popupViewBg {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				margin-bottom: 30rpx;

				.popupViewItem {
					width: 264rpx;
					height: 88rpx;
					background: #F5F5F5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 1rpx solid #E2E2E2;
					text-align: center;
					line-height: 88rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;

					&.active {
						width: 264rpx;
						height: 88rpx;
						background: #FFF6EF;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 1rpx solid #FA802A;
						text-align: center;
						line-height: 88rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #FA802A;
					}
				}

				.popupViewItem:nth-child(2) {
					margin-left: 62rpx;
				}

				.popupViewItem1 {
					width: 264rpx;
					height: 60rpx;
					background: #F5F5F5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 1rpx solid #E2E2E2;
					text-align: center;
					line-height: 60rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;

					&.active {
						width: 264rpx;
						height: 60rpx;
						background: #FFF6EF;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						border: 1rpx solid #FA802A;
						text-align: center;
						line-height: 60rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FA802A;
					}
				}

				.popupViewItem1:nth-child(2) {
					margin-left: 62rpx;
				}

				.popupViewItem2 {
					padding: 0 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
				}

				// .popupViewItemText{
				// 	font-size: 60rpx;
				// }

			}
		}

		.btn {
			width: 100%;
			height: 76rpx;
			background: #FA802A;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			margin-top: 36rpx;
			text-align: center;
			line-height: 76rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	
</style>



<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 900;
		opacity: 0.7;
	}

	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 999;
		transition: all 0.3s;
	}

	.scrolls {
		width: 100vw;
		height: 60vh;
		z-index: 500;
		padding-bottom: env(safe-area-inset-bottom);
		
		background: #f6F7F9;
		.coupon-card {
			&:nth-child(1) {
				margin-top: 30rpx;
			}
		}
	}
	.coupon-card {
		margin: 0rpx 20rpx 20rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx 0 20rpx;
	
		.card-content {
			display: flex;
			margin: 30rpx 0;
	
			.amount-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 10rpx;
				width: 260rpx;
	
				&.status1 {
					color: #e35319;
				}
	
				&.status2 {
					color: #6bb44f;
				}
	
				&.status3 {
					color: #4483fc;
				}
	
				.amount {
					display: flex;
					align-items: flex-end;
	
					text {
						margin-bottom: 10rpx;
					}
	
					.price {
						font-weight: 500;
						font-size: 54rpx;
						margin-right: 4rpx;
					}
				}
	
				.amount-text {
					margin-top: 4rpx;
				}
			}
	
			.coupon-info {
				flex: 1;
				color: #323233;
				margin-left: 20rpx;
	
				.info-name {
					font-size: 30rpx;
					font-weight: 500;
				}
	
				.info-time {
					margin-top: 20rpx;
				}
			}
		}
	
		.coupon-desc {
			border-top: 1px dashed #ebedf0;
			padding: 20rpx;
			color: #888;
			display: flex;
			justify-content: space-between;
			align-items: center;
	
			view {
				border: 1px solid transparent;
				border-radius: 50rpx;
				padding: 10rpx 20rpx;
			}
	
			&.status1 {
				view {
					border-color: #e35319;
					color: #e35319;
				}
			}
	
			&.status2 {
				view {
					border-color: #6bb44f;
					color: #6bb44f;
				}
			}
	
			&.status3 {
				view {
					border-color: #4483fc;
					color: #4483fc;
				}
			}
		}
	}
	
	.coupon-card:last-of-type {
		margin-bottom: 0;
	}
	
	.subside_info_tips {
		padding: 20rpx 30rpx;
		color: #f00;
		text {
			font-size: 26rpx;
		}
	}
</style>